<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        积分管理
        <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>积分商城
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form :model="form" label-width="100px">
            <el-form-item label="业务品牌">
              <el-input
                placeholder="请输入业务品牌"
                v-model="form.channelName"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品类型">
              <el-cascader
                  v-model="form.productType"
                  :options="options"
                  :props="{ emitPath: false }"
                ></el-cascader>
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input
                placeholder="请输入商品名称"
                v-model="form.productName"
              ></el-input>
            </el-form-item>
            <el-form-item label="上架时间">
              <div style="display: flex">
                <el-date-picker
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="开始日期"
                  v-model="form.startDate"
                  style="width: 100%"
                ></el-date-picker>
                <div class="times">&nbsp;&nbsp;-&nbsp;&nbsp;</div>
                <el-date-picker
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="结束日期"
                  v-model="form.endDate"
                  style="width: 100%"
                ></el-date-picker>
              </div>
            </el-form-item>
          </el-form>

          <div style="clear: both"></div>
          <div style="margin-left: 30px; margin-top: 20px">
            <div class="btnGroup">
              <el-button type="primary" @click="search">搜索</el-button>

              <el-button @click="rest">重置</el-button>
            </div>
          </div>
        </div>
        <el-table
          style="margin-top: 30px"
          :data="tableData"
          tooltip-effect="dark"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          ref="multipleTable"
        >
          <el-table-column
            min-width="200"
            label="业务品牌"
            prop="channelName"
          ></el-table-column>
          <el-table-column
            min-width="200"
            label="商品类型"
            prop="productType"
          ></el-table-column>

          <el-table-column
            min-width="200"
            label="商品名称"
            prop="productName"
          ></el-table-column>
          <el-table-column
            min-width="200"
            label="商品售价"
            prop="productAmount"
          ></el-table-column>
          <el-table-column
            min-width="200"
            label="积分兑换数"
            prop="scoreCount"
          ></el-table-column>
          <el-table-column
            min-width="200"
            label="上架时间"
            prop="updateDate"
          ></el-table-column>
          <el-table-column min-width="200" label="状态">
            <template slot-scope="scope">
              <div>
                <el-switch
                  @change="bian(scope.row)"
                  v-model="scope.row.status"
                  active-color="#13ce66"
                  active-value="0"
                  inactive-value="1"
                  inactive-color="#cccccc"
                >
                </el-switch>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="form.currPage"
          :page-size="form.pageSize"
          :page-sizes="[20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import https from "../../plugins/https";
import { CompareDate } from "../../assets/js/commion";
export default {
  data() {
    return {
      values: "1",
      status: "0",
      activeName: "",
      tableData: [
        {
          status: "0",
        },
      ],
      options: "",
      // 总页数
      // 表格
      list: [],
      form: {
        productType: "",//商品类型
        startDate: "", //开始时间
        endDate: "", //结束时间
        channelName: "", //业务品牌
        productName: "", //商品名称
        pageSize: 20, //一页几条
        currPage: 1, //第几页
      },
      total: "",
    };
  },
  created() {
    this.getList();
    // 获取商品类型
    https.shopLister().then((res) => {
      if (res.data.code == "0000") {
        console.log("商品类型");
        this.options = res.data.data;
      } else {
        layer.open({
          content: d.data.msg,
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
      }
    });
  },
  methods: {
    // 重置
    rest() {
      this.form.currPage = 1;
      this.form.productType = "";
      this.form.startDate = "";
      this.form.endDate = "";
      this.form.channelName = "";
      this.form.productName = "";
      this.getList();
    },
    // 状态发生变化
    bian(val) {
      this.$confirm(
        "关闭后，该商品在积分商城下架，谨慎操作,如再次上架在库存售卖配置中增值",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          axios
            .post("api/brand/modifyUseScore", { uid: val.uid, status: "0" })
            .then((res) => {
              console.log("开关");
              console.log(res);
              // this.$message({
              //   type: "success",
              //   message: "成功!",
              // });
              this.getList();
              layer.open({
                content: res.data.msg,
                skin: "msg",
                time: 1, //1秒后自动关闭
              });
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消",
          // });
          this.getList();
        });
    },
    getList() {
      axios
        .post("scoActive/getScoreAvailableProduct", this.form)
        .then((res) => {
          console.log(res);
          for (let i = 0; i < res.data.data.records.length; i++) {
            res.data.data.records[i].status = "0";
          }
          this.tableData = res.data.data.records;
          this.total = Number(res.data.data.total);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    search() {
      if (this.form.startDate != "" && this.form.endDate != "") {
        if (CompareDate(this.form.startDate, this.form.endDate)) {
          this.form.currPage = 1;
          this.getList();
        } else {
          layer.open({
            content: "结束时间不能早于开始时间",
            skin: "msg",
            time: 1, //1秒后自动关闭
          });
        }
      } else {
        this.form.currPage = 1;
        this.getList();
      }
    },
    // 修改
    set() {
      this.$router.push({
        name: "exchange",
        query: {
          type: "0001",
        },
      });
    },
    // 查看
    cat() {
      this.$router.push({
        name: "exchange",
        query: {
          type: "0002",
        },
      });
    },

    // 跳转页面
    handleCommand(command) {
      if (command == "new") {
        this.$router.push({
          name: "exchange",
        });
      }
    },

    // 第几页
    handleCurrentChange(val) {
      console.log(val);
      this.form.currPage = val;
      this.getList();
    },
    // 每页几条
    handleSizeChange(val) {
      console.log(val);
      this.form.pageSize = val;
      this.getList();
    },
  },
};
</script>

<style>
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>